<template>
    <div class="container">
        <img class="background" :src="picImg">
        <div class="aa-container">
            <div class="aa">
                <img :src="picImg">
            </div>
            <span class="text-container">
                {{headText}}
            </span>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        picImg: {
            type: String,
            default: ''
        },
        headText:{
            type: String,
            default: '',
        }
    }
}
</script>

<style lang="scss" scoped>
    .container {
        width: 100%;
        height: 500px;
        position: relative;
        .background {
            width: 100%;
            height: 80%;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: 50%;
            -webkit-filter: blur(20px);
            filter: blur(20px);
            opacity: .7;
            // -webkit-transform: scale(1.5);
            // -ms-transform: scale(1.5);
            transform: scale(1.5);
        }
        .aa-container {
            display: flex;
            width: 90%;
            .aa {
                position: absolute;
                z-index: 2;
                width: 350px;
                height: 350px;
                top: 90px;
                left: 30px;
                // display: flex;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .text-container {
                width: 500px;
                position: absolute;
                top: 100px;
                left: 420px;
                font-size: 43px;
                color: #fefefe;
                line-height: 1.3;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                display: -webkit-box;
            }
        }
    }
</style>